<template>
	<div id="container">
		<div id="header">
			<el-popover
			    placement="bottom"
			    :width="100"
			    trigger="click"
			    content="管理员可编辑"
			  >
			    <template #reference>
			      <el-button>管理员编辑界面</el-button>
			    </template>
			  </el-popover>
		</div>
		<div id="center">
			<div id="left">
				<el-menu :router="true">
					<el-sub-menu index="1">
						<template #title>
							<i class="el-icon-user"></i>
							菜单
						</template>
						<el-menu-item-group>
							<template #title>请选择要管理的表单</template>
							          <el-menu-item index="/userAdmin">管理员表</el-menu-item>
							          <el-menu-item index="/stuAdmin">学生信息表</el-menu-item>
									  <el-menu-item index="/consultAdmin">咨询师信息表</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
				</el-menu>
			</div>
			<div id="right">
				<router-view></router-view>
			</div>
		</div>
		<div id="footer">
			<el-alert
			    title="版权信息"
			    type="info"
			    :closable="false">
			  </el-alert>
		</div>
	</div>
</template>

<script>
	export default{
		name:'main',
	}
	
</script>

<style scoped="scoped">
	#container{
		width:100%;
		height:100%;
		display:flex;
		flex-direction: column;
	}
	#header{
		width: 100%;
		height:80px;
		background-color:#d2f3bc;
	}
	#footer{
		width: 100%;
		height: 30px;
		background-color: #d2f3bc;
	}
	#center{
		width: 100%;
		flex:1;
		display: flex;
	}
	#left{
		width: 200px;
		height: 100%;
		background-color:#F5DAB1;
	}
	#right{
		width: 300px;
		flex:1;
		height: 100%;
		background-color:#E1F3D8;
	}
</style>
